<!-- 设备台账 -->
<template>
  <div>
   <!--  <van-dropdown-menu>
      <van-dropdown-item v-model="selectVal" :options="options" />
    </van-dropdown-menu> -->
    <van-search
      v-model="searchVal"
      @search="onSearch"
      placeholder="请输入搜索设备名称"
    />

    <div class="line"></div>
    <van-tabs v-model="active">
      <van-tab title="正常">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh('正常')">
          <MotionGroup
            ref="MotionGroup"
            @getData="getData"
            :dataLength="normalList.length"
          >
            <div
              class="facility"
              v-for="(el, i) of normalList"
              :key="i"
              @click.stop="goDetail(el, '正常')"
            >
              <div class="message">
                <div>{{ el.processVariables.itemName }}</div>
                <div>
                  编号:
                  {{ el.areaInfo ? el.areaInfo.serialNumber : "/" }}
                  &nbsp;&nbsp;&nbsp; 区域:
                  {{ el.areaInfo ? el.areaInfo.name : "/" }}
                </div>
              </div>
              <van-button icon="weapp-nav" @click.stop="clickAlart(el, 'b')" />
            </div>
          </MotionGroup>
        </van-pull-refresh>
      </van-tab>
      <van-tab title="维保中">
        <van-empty description="没有数据..." v-if="faultList.length === 0" />
        <div class="deviceGrop" v-for="(el, i) of faultList" :key="i">
          <div
            class="item"
            v-for="(item, index) of el.processVariables.device"
            :key="index"
          >
            <div class="facility">
              <div class="message">
                <div>{{ item.name }}</div>
                <div>
                  编号:{{ item.equipmentNo }} &nbsp;&nbsp;&nbsp; 区域:{{
                    item.areaInfo.detail
                  }}
                </div>
              </div>
              <van-button
                icon="weapp-nav"
                @click.stop="clickAlart(item, 'b')"
              />
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="维修中">
        <van-empty description="没有数据..." v-if="maintList.length === 0" />
        <div
          class="facility"
          v-for="(el, i) of maintList"
          :key="i"
          v-else
          @click.stop="goDetail(el, '维修中')"
        >
          <div class="message">
            <div>{{ el.processVariables.device_name }}</div>
            <div>
              编号:
              {{
                el.processVariables
                  ? el.processVariables.device_equipmentNo
                  : "/"
              }}
              &nbsp;&nbsp;&nbsp; 区域:
              {{
                el.processVariables
                  ? el.processVariables.device_areaInfo.name
                  : "/"
              }}
            </div>
          </div>
          <van-button icon="weapp-nav" @click.stop="clickAlart(el, 'a')" />
        </div>
      </van-tab>
    </van-tabs>
    <van-action-sheet
      v-if="active === 0"
      v-model="show"
      :actions="actions1"
      @select="onSelect"
    />
    <van-action-sheet
      v-else-if="active === 1"
      v-model="show"
      :actions="actions2"
      @select="onSelect"
    />
    <van-action-sheet
      v-else-if="active === 2"
      v-model="show"
      :actions="actions3"
      @select="onSelect"
    />
  </div>
</template>

<script>
// apis
import {
  task,
  GetEquipment,
  taskVariables,
  getAvueForm,
  getDefinition
  // getInstance
} from '@/api/index'
// Components
import MotionGroup from '@/components/MotionGroup'
import {
  Tab,
  Tabs,
  Search,
  Divider,
  Button,
  ActionSheet,
  Empty,
  PullRefresh,
  List,
  DropdownMenu,
  DropdownItem
} from 'vant'
export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Search.name]: Search,
    [Divider.name]: Divider,
    [Button.name]: Button,
    [ActionSheet.name]: ActionSheet,
    [Empty.name]: Empty,
    [PullRefresh.name]: PullRefresh,
    MotionGroup,
    [List.name]: List,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem
  },
  filters: {},
  data () {
    return {
      searchVal: '',
      active: 0,
      show: false,
      actions1: [{ name: '报修' }, { name: '设备台账' }],
      actions2: [{ name: '设备台账' }],
      actions3: [
        { name: '设备台账' }
        /* { name: '报修单' },
        { name: '填写维修单' } */
      ],
      normalList: [], // 正常
      normalListFilter: [],
      facilityId: '',
      faultList: [], // 维保
      isLoading: false,
      maintList: [], // 维修
      facilityItem: {
        page: 1,
        size: 50
      }, //  单个设备
      personId: '',
      options: [
        { text: '设备名称', value: '设备名称' },
        { text: '区域名称', value: '区域名称' }
      ],
      selectVal: '设备名称' // 选择项
    }
  },
  watch: {
    active () {
      switch (this.active) {
        case 0:
          this.GetEquipments({ name: '' })
          break
        case 1:
          console.log(123)
          this.getTask('maintain')
          break
        case 2:
          this.getTask('repair')
          break
      }
    }
  },
  computed: {},
  created () {
    this.getUserInfo()
    this.GetEquipments({ name: '' })
  },
  methods: {
    goDetail (el, name) {
      console.log(el, 'el.processVariables.device_id')
      if (name === '维修中' || name === '维保中') {
        this.$router.push({
          path: '/standingBook-detail',
          query: {
            facilityId: el.processVariables.device_id
          }
        })
      } else if (name === '正常') {
        this.$router.push({
          path: '/standingBook-detail',
          query: {
            facilityId: el.id
          }
        })
      }
    },
    getData () {
      console.log('dddddd')
    },
    onRefresh (name) {
      this.isLoading = true
      switch (name) {
        case '正常':
          this.GetEquipments({ name: this.searchVal })
          break
        case '维保中':
          this.getTask('maintain', this.searchVal)
          break
        case '维修中':
          this.getTask('repair', this.searchVal)
          break
      }
    },
    onSearch (val) {
      const active = this.active /* 0正常 1维保 2维修 */
      // const optionItem = this.selectVal
      switch (active) {
        case 0 :
          this.GetEquipments({ name: val })
          /*  console.log(optionItem, 'optionItem')
          if (optionItem === '设备名称') {
            this.GetEquipments({ name: val })
          } else if (optionItem === '区域名称') {
            console.log(132)
            this.GetEquipments({ region: val })
          } */
          break
        case 1:
          this.getTask('maintain', val)
          break
        case 2:
          this.getTask('repair', val)
          break
      }
    },
    GetEquipments ({ name, region }) {
      const data = this.facilityItem
      data.name = name || null
      // data.region = region || null
      data.states = ['1']
      this.GetEquipment(data)
    },
    GetEquipment (data) {
      GetEquipment(data).then((res) => {
        this.isLoading = false
        this.normalList = res.list
      })
    },
    getUserInfo () {
      const { token, tenantId, personId } = this.$route.query
      this.token = token
      this.tenantId = tenantId
      this.personId = personId
      window.localStorage.getItem('token', token)
      window.localStorage.getItem('tenantId', tenantId)
      window.localStorage.getItem('personId', personId)
    },
    getTask (processDefinitionKey, name = '') {
      var conditionKeyLike = ['owner']
      var conditionValueLike = [window.localStorage.getItem('personId')]
      if (name) {
        conditionKeyLike.push('device_name')
        conditionValueLike.push(name)
      }
      const data = {
        // tenantId: this.tenantId,
        tenantId: window.localStorage.getItem('tenantId'),
        processCategory: processDefinitionKey,
        page: 1,
        pageSize: 500,
        conditionKeyLike: conditionKeyLike.join(','),
        conditionValueLike: conditionValueLike.join(','),
        withVariables: true,
        taskNameList: '维修'
      }
      this.task(data)
    },
    task (data) {
      task(data).then((res) => {
        const { processCategory } = data
        this.isLoading = false
        if (processCategory === 'maintain') {
          this.faultList = res.list
        } else if (processCategory === 'repair') {
          this.maintList = res.list
        }
      })
    },
    guarantee () {
      const data = {
        processId: this.facilityItem.processDefinitionId,
        taskId: this.facilityItem.taskDefinitionKey,
        tenantId: window.localStorage.getItem('tenantId')
      }
      taskVariables(data).then((res) => {
        if (!res[0].detail) {
          alert('detail为空')
        }
      })
    },
    async getDefinition () {
      const data1 = {
        definitionKey: 'repair',
        tenantId: window.localStorage.getItem('tenantId'),
        isNewest: true
      }
      const definition = await getDefinition(data1) // 定义流程
      const arr = definition.list[0]
      const data2 = {
        processId: arr.id,
        taskId: 'StartEvent',
        tenantId: window.localStorage.getItem('tenantId'),
        type: 'pc'
      }
      const form = await getAvueForm(data2) // 表单
      // const { detail, id } = form
      console.log(this.facilityItem, 'adsf')
      /*  this.$router.push({
        path: '/maintainContent',
        query: {
          formData: this.facilityItem.processVariables,
          config: detail,
          taskId: id
        }
      }) */
      if (Array.isArray(form) && form.length === 0) {
        alert('字段为空')
      }
    },
    onSelect (item) {
      const { name } = item
      switch (name) {
        case '报修':
          this.getInstance()
          break
        case '设备台账':
          this.$router.push({
            path: '/standingBook-detail',
            query: {
              facilityId:
                this.facilityId || this.facilityItem.processVariables.device_id
            }
          })
          break
        /*  case '保修单':
          this.guarantee()
          break
        case '填写维修单':
          this.getDefinition()
          break */
      }
    },
    async getInstance () {
      const data = JSON.parse(JSON.stringify(this.facilityItem))

      var obj = {
        initiator: window.localStorage.getItem('parentId')
      }
      for (var i in data) {
        obj['device_' + i] = data[i]
      }
      this.$router.push({
        path: '/serviceContent',
        query: {
          key: 'repair',
          map: obj,
          id: data.id
        }
      })
    },
    clickAlart (el, type) {
      console.log(el, 'kkkkk')
      if (type === 'b') {
        this.facilityItem = el
        this.facilityId = el.id
      } else {
        // a -> activiti
        this.facilityItem = el
        this.facilityId = el.processVariables.device_id
      }
      this.show = true
    }
  }
}
</script>
<style lang='less' scoped>
.line {
  width: 100%;
  height: 1px;
  border: 1px solid rgba(242, 242, 242, 1);
}
.facility {
  height: 60px;
  border-bottom: 1px solid rgba(242, 242, 242, 1);
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  align-items: center;
  .message {
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    > :last-child {
      font-size: 12px;
    }
  }
}
.deviceGrop {
  border: 1px dashed #ddd;
  padding: 5px;
  margin: 10px;
  margin-bottom: 20px;
  > .item {
    border-bottom: 1px solid #ddd;
  }
}
</style>
